<template>
  <div>
    <el-card style="margin: 20px 0px">
      <CategorySelect @getCategoryId="getCategoryId" :show="scence != 0" />
    </el-card>
    <el-card>
      <div v-show="scence == 0">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addSpu"
          :disabled="!category3Id"
          >添加SPU</el-button
        >
        <el-table border style="width: 100%" :data="spuList">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="width">
          </el-table-column>
          <el-table-column
            prop="description"
            label="SPU描述"
            width="width"
          ></el-table-column>
          <el-table-column label="操作" width="width">
            <template slot-scope="{ row }">
              <hint-button
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加sku"
                @click="addSku(row)"
              ></hint-button>
              <hint-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改spu"
                @click="updateSpu(row)"
              ></hint-button>
              <hint-button
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看当前spu全部sku"
                @click="getSkuList(row)"
              ></hint-button>
              <el-popconfirm
                :title="`确认删除${row.spuName}?`"
                @onConfirm="deleteSpu(row)"
              >
                <hint-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  title="删除spu"
                  slot="reference"
                ></hint-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器-->
        <el-pagination
          style="margin-top: 20px; text-align: center"
          :current-page="page"
          @current-change="getSpuList"
          @size-change="handleSizeChange"
          :page-size="limit"
          :page-sizes="[3, 5, 10]"
          layout="prev, pager, next,jumper,->,total,sizes "
          :total="total"
        >
        </el-pagination>
      </div>
      <SpuForm v-show="scence == 1" @cancel="cancel" ref="spu" />
      <SkuForm v-show="scence == 2" @cancel="cancel" ref="sku" />
    </el-card>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible" :before-close="close">
      <el-table  v-loading="loading" :data="skuList" border style="width:100%;">
        <el-table-column
          property="skuName"
          label="名称"
          width="width"
        ></el-table-column>
        <el-table-column
          property="price"
          label="价格"
          width="width"
        ></el-table-column>
        <el-table-column
          property="weight"
          label="重量"
          width="width"
        ></el-table-column>
        <el-table-column property="property" label="默认图片" width="width">
          <template slot-scope="{ row }">
            <img :src="row.skuDefaultImg" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SkuForm from "./SkuForm";
import SpuForm from "./SpuForm";
export default {
  name: "Spu",
  components: {
    SkuForm,
    SpuForm,
  },
  data() {
    return {
      category1Id: "",
      category2Id: "",
      category3Id: "",
      // 当前页码
      page: 1,
      // 每页展示条数
      limit: 3,
      // 总数据数
      total: 0,
      // 接收spu数据
      spuList: [],
      scence: 0, //0代表展示SPU列表   1代表添加SPU|修改SPU   2代表添加SKU
      // 控制弹框
      dialogTableVisible: false,
      // 存储sku数据
      skuList: [],
      // 加载动画
      loading:true
    };
  },
  methods: {
    // 获取三级联动传来的id
    getCategoryId(categoryId, level) {
      if (level == 1) {
        this.category1Id = categoryId;
        this.category2Id = "";
        this.category3Id = "";
      } else if (level == 2) {
        this.category2Id = categoryId;
        this.category3Id = "";
      } else {
        this.category3Id = categoryId;
        this.getSpuList();
      }
    },
    // 获取spu列表数据
    async getSpuList(pager = 1) {
      this.page = pager;
      const { page, limit, category3Id } = this;
      let result = await this.$API.spu.reqSpuList(page, limit, category3Id);
      if (result.code == 200) {
        this.total = result.data.total;
        this.spuList = result.data.records;
      }
    },
    // 当分页器每页展示数据条数发生变化时
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSpuList();
    },
    // 添加SPU按钮的回调
    addSpu() {
      this.scence = 1;
      this.$refs.spu.addSpuDate(this.category3Id);
    },
    // 修改Spu
    updateSpu(row) {
      this.scence = 1;
      this.$refs.spu.initSpuData(row);
    },
    // 自定义事件取消按钮回调
    cancel(flag) {
      this.scence = 0;
      if (flag == "add") {
        this.getSpuList();
      } else {
        this.getSpuList(this.page);
      }
    },
    // 删除Spu按钮的回调
    async deleteSpu(row) {
      let result = await this.$API.spu.reqDeleteSpu(row.id);
      if (result.code == 200) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getSpuList(this.spuList.length > 1 ? this.page : this.page - 1);
      }
    },
    // 添加Sku
    addSku(row) {
      this.scence = 2;
      this.$refs.sku.getData(
        row,
        this.category1Id,
        this.category2Id,
        this.category3Id
      );
    },
    // 获取sku的数据
    async getSkuList(row) {
       this.dialogTableVisible = true;
      let result = await this.$API.spu.reqSkuList(row.id);
      if (result.code == 200) {
        this.loading = false
        this.skuList = result.data;
      }
    },
    // 关闭对话框的回调
    close(done){
      // loading属性再次为真
      this.loading = true
      // 清除sku列表数据
      this.skuList = []
      // 关闭对话框
      done()
    }
  },
};
</script>

<style lang="scss" scoped></style>
